import React, { useEffect, useState } from "react";
import "./ItemInfo.css";
import { itemService } from "../../service/itemService";
import { Top } from "../components/top/Top";
import Bottom from "../components/bottom/Bottom";
import { common_utils } from "../../utils/utils";
import { cartService } from "../../service/cartService";
import { v4 as uuidv4 } from 'uuid';

export default function ItemInfo() {
    const [item, setItem] = useState({
        description: "",
        image: "",
        itemid: "",
        name: "",
        category: "",
        price: 0,
        quantity: 0
    });
    const [alerts, setAlerts] = useState([]);

    useEffect(() => {
        itemService.getItemInfo(common_utils.getParamFromUrl(6), (response) => {
            setItem({
                description: response.data.description,
                image: require(`../../images/${response.data.image}`), // 动态加载图片
                itemid: response.data.itemId,
                name: response.data.name,
                category: response.data.category,
                price: response.data.price,
                quantity: response.data.quantity
            });
        });
    }, []);

    const addToCart = (id) => {
        cartService.addCartItem(common_utils.getUsername(), id, 1, (res) => {
            const alertId = uuidv4();
            setAlerts((prevAlerts) => [
                ...prevAlerts,
                { id: alertId, message: "Item added to cart!" }
            ]);
            setTimeout(() => {
                setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.id !== alertId));
            }, 2000); // Alert disappears after 2 seconds
        }, (error) => {
            console.error("Error adding item to cart:", error);
        });
    };

    if (!item) {
        return <div className="item-info-container">加载中...</div>;
    }

    return (
        <>
            <Top />
            <div className="item-info-container">
                {alerts.map((alert, index) => (
                    <div
                        key={alert.id}
                        className="alert"
                        style={{
                            position: 'fixed',
                            top: `calc(50% + ${index * 60}px)`, // Stack alerts vertically
                            left: '50%',
                            transform: 'translate(-50%, -50%)',
                            backgroundColor: '#4caf50',
                            color: 'white',
                            padding: '10px 20px',
                            borderRadius: '5px',
                            zIndex: 1000 + index,
                            animation: 'slideIn 0.5s ease-in'
                        }}
                    >
                        {alert.message}
                    </div>
                ))}
                <div className="item-info-table">
                    <div className="item-info-header new-layout">
                        <img src={item.image} alt="fish3" className="item-info-img new-size" />
                        <div className="item-info-title new-title">{item.description || "Fresh Water fish from Japan"}</div>
                    </div>
                    <div className="item-info-body new-body">
                        <div className="item-info-row new-row">
                            <span>Item ID:</span>
                            <span className="item-info-value itemid-value">{item.itemid || "EST-5"}</span>
                        </div>
                        <div className="item-info-row new-row">
                            <span>Product Name:</span>
                            <span className="item-info-value name-value" style={{ fontWeight: 600, fontSize: 22 }}>{item.name || "Spotless Koi"}</span>
                        </div>
                        <div className="item-info-row new-row">
                            <span>Item Quantity:</span>
                            <span className="item-info-value stock-value">{item.quantity} in stock.</span>
                        </div>
                        <div className="item-info-row new-row">
                            <span>Item Price:</span>
                            <span className="item-info-value price-value">${item.price}</span>
                        </div>
                    </div>
                    <div className="item-info-footer">
                        <button className="item-info-cart-btn" onClick={() => addToCart(item.itemid)}>Add to Cart</button>
                    </div>
                </div>
            </div>
            <Bottom />
            <style>
                {`
                    @keyframes slideIn {
                        from {
                            transform: translate(-50%, -70%);
                            opacity: 0;
                        }
                        to {
                            transform: translate(-50%, -50%);
                            opacity: 1;
                        }
                    }
                `}
            </style>
        </>
    );
}